import AppleItem from './AppleItem'
import '../styles/appleBasket.scss'
import { useRootStore } from '../stores/RootStore'
import { observer } from 'mobx-react-lite'

function AppleBusket() {
    const { appleBasketStore } = useRootStore()
    const {
        apples,
        isPicking,
        pickApple,
        unEatenAppleData,
        eatenAppleData
    } = appleBasketStore
    /** 获取未吃苹果的组件数组*/
    const getAppleItem = () => {
        let data = []
        apples.forEach(apple => {
            if (!apple.isEaten) {
                data.push( <AppleItem apple={apple} key={apple.id}/> )
            }
        })
        if(!data.length) data.push(<div className="empty-tip" key="empty">苹果篮子空空如也</div>)
        return data
    }

    return (
        <div className="appleBusket">
            <div className="title">苹果篮子</div>

            <div className="stats">
                <div className="section">
                    <div className="head">当前</div>
                    <div className="content">{unEatenAppleData.count}个苹果，{unEatenAppleData.weight}克
                    </div>
                </div>
                <div className="section">
                    <div className="head">已吃掉</div>
                    <div className="content">{eatenAppleData.count}个苹果，{eatenAppleData.weight}克</div>
                </div>
            </div>

            <div className="appleList">
                { getAppleItem() }
            </div>

            <div className="btn-div">
                <button  className={isPicking ? 'disabled' : ''}  onClick={pickApple} >{!isPicking ? '摘苹果' : '正在采摘...'}</button>
            </div>
        </div>
    )
}

export default observer(AppleBusket);
